<template>
	<div class="message-item">
		<div class="type-icon">
			<el-icon :class="typeData.class"><component :is="typeData.iconComputed" /></el-icon>
		</div>
		<div class="content">
			<p :title="props.data.message">{{ props.data.message }}</p>
		</div>
		<div class="close icon-button" title="移除此消息" @click="emits('remove')">
			<el-icon><Close /></el-icon>
		</div>
	</div>
</template>

<script setup lang="ts">
import { PropType, computed } from 'vue';
import { MessageObject } from '@type/WindowService';
import { Warning, CircleCheck, CircleClose, Close } from '@element-plus/icons-vue';

const emits = defineEmits(['remove']);

const props = defineProps({
	data: {
		type: Object as PropType<MessageObject>,
		required: true,
	},
});

// 不同类型消息的数据
const typeData = computed(() => {
	switch (props.data.type) {
		case 'info':
			return { iconComputed: Warning, class: 'info' };
		case 'success':
			return { iconComputed: CircleCheck, class: 'success' };
		case 'warning':
			return { iconComputed: Warning, class: 'warning' };
		case 'error':
			return { iconComputed: CircleClose, class: 'error' };
	}
});
</script>

<style scoped lang="scss">
.message-item {
	display: flex;
	padding-left: 5px;
	padding-right: 7px;
	padding-top: 10px;
	padding-bottom: 10px;
	&:hover {
		background-color: var(--mouse-hover-bg-color-1);
	}
	.type-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		:deep(.el-icon) {
			font-size: 18px;
		}
		.info {
			color: var(--theme-main-color);
		}
		.warning {
			color: var(--theme-warning-color);
		}
		.success {
			color: var(--theme-success-color);
		}
		.error {
			color: var(--theme-danger-color);
		}
	}
	.content {
		flex: 1;
		min-height: 24px;
		overflow: hidden;
		padding-left: 2px;
		font-size: 14px;
		& > p {
			max-width: 100%;
			line-height: 24px;
			word-wrap: break-word;
		}
	}
	.close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		margin: 4px;
		border-radius: 4px;
		&:hover {
			background-color: var(--mouse-hover-bg-color-3);
			color: var(--theme-danger-color);
		}
	}
}
</style>
